
.column {
  float: left;
  width: 33.333333%;
  padding-left: ms(-2);
  padding-right: ms(-2);

  @include media("<tablet") {
	  width: 50%;
	  padding-left: ms(-4);
	  padding-right: ms(-4);
  }

	&.column2 {
	  padding-top: 11.5%;

	  @include media("<tablet") {
	    display: none
	  }
	}

	&.column3 {
	  padding-top: 22.9%;

	  @include media("<tablet") {
	    padding-top: 28%;
	  }
	}
}

.shape {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  margin-bottom: ms(1);
  position: relative;

  @include media(">=tablet") {
    margin-bottom: ms(3);
  }

  &__svg {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 10;
    transform: scale(0.3) translateZ(0);
	  transition: transform 600ms cubic-bezier(0.580, 0.300, 0.005, 1.000);
  }

  svg {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  transform: scale3d(1, 1, 1) translateZ(0);
  }

	&[data-emergence=visible] .shape__svg {
	  transform: scale(0.9) translateZ(0);
	}

	&[data-emergence=visible] svg {
    animation: jello-horizontal 600ms both cubic-bezier(0.580, 0.300, 0.005, 1.000);
	}

	&.shape--square svg path { fill: $white; }
	&.shape--triangle svg path { fill: $strong; }
	&.shape--circle svg circle { fill: $black; }

	&:before, &:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) translateZ(0);
		background-color: $pastel;
		z-index: 20;
	}

	&:before {
		width: ms(-2);
		height: 1px;
	}

	&:after {
		height: ms(-2);
		width: 1px;
	}
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1) translateZ(0);
  }
  25% {
    transform: scale3d(1.1, 0.9, 1) translateZ(0);
  }
  50% {
    transform: scale3d(0.95, 1.05, 1) translateZ(0);
  }
  75% {
    transform: scale3d(1.02, 0.98, 1) translateZ(0);
  }
  100% {
    transform: scale3d(1, 1, 1) translateZ(0);
  }
}
